<template>
  <div class="home container">

    <h3>OPCUA传感器变量配置</h3>

    <el-table :data="opc_variables" style="width: 100%" height="550">
      <el-table-column fixed prop="id" label="ID" width="100" />
      <el-table-column fixed prop="name" label="变量名" width="200" />
      <el-table-column fixed prop="label" label="变量描述" width="200" />
      <el-table-column fixed prop="position" label="位置" width="200" />
      <el-table-column prop="vtype" label="变量类型" width="200" />
      <el-table-column prop="nodeid" label="Nodeid" width="200" />
    </el-table>

  </div>
</template>

<script setup lang="ts">

import { reactive,onMounted } from 'vue'
import { useUserStore } from '@/store/modules/user'
import {getVariables} from '@/api/opcua'
import {Variable} from '@/api/opcua/types'
import { ColumnProps } from '@/components/ProTable/src/types'

let opc_variables = reactive<Variable[]>([])

onMounted( async ()=>{
  let vs = await getVariables()
  console.log("@@@ getVariables @@@ ", vs.data);
  opc_variables.splice(0, 0, ...vs.data)
})


</script>

<style scoped lang="scss">
.home {
  height: 100%;

  .page-header {
    display: flex;
    align-items: center;

    .page-header-tip {
      flex: 1;
      margin-left: 20px;
    }

    .page-header-tip-title {
      margin-bottom: 12px;
      font-size: 20px;
      font-weight: 700;
      color: #3c4a54;
    }

    .page-header-tip-desc {
      min-height: 20px;
      font-size: 14px;
      color: #808695;
    }
  }

  .welcome {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
}
</style>
